<template>
    <div id="app">
        <Head>项目案例</Head>
        <div class="line">
            <div class="title">项目名称</div>
            <input placeholder="请填写名称" v-model="sub.name"/>
        </div>
        <div class="protitle">案例图片</div>
        <div class="imgcen">
            <img v-if="sub.img_src" :src="sub.img_src?sub.img_src:'../../assets/freelance/images/addimg.png'"/>
            <van-uploader :after-read="uploadAvatar"/>
        </div>

        <div class="btn" @click="save">保&nbsp;&nbsp;存</div>
    </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
  },
  data () {
    return {
      uploading: false,
      sub: {
        id: '',
        name: '',
        img: '',
        img_src: ''
      }
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.id != 'null') {
      this.sub.id = this.$route.query.id
    }
    // 请求数据
    this.fetchData()
  },
  methods: {
    fetchData () {
      http.get(api.get_item, {id: this.sub.id, type: 4})
        .then(res => {
          this.sub.name = res.data.title
          this.sub.img = res.data.img
          this.sub.img_src = res.data.img_str
        }).catch(() => {})
    },
    // 上传图片
    uploadAvatar (file) {
      let fileRaw = file.file
      let filetypeArr = (fileRaw.type || '').split('/')
      let filetype = filetypeArr[1]
      let tyepArr = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      if (tyepArr.indexOf(filetype) == -1) {
        this.$notify('文件类型不支持')
        return false
      }
      if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
        let size = this.$store.state.config.fileupload_size / 1024
        size = size.toFixed(1)
        this.$notify('文件大小超出限制，最大' + size + 'mb')
        return false
      }
      this.uploading = true
      http
        .postFormData(api.uploadFile, { file: file.file })
        .then(res => {
          this.uploading = false
          this.sub.img_src = res.data.file_url
          this.sub.img = res.data.file_id
        })
        .catch(err => {
          this.uploading = false
          console.log(err)
        })
    },
    save () {
      if (!this.sub.name) {
        this.$notify('请填写名称')
        return false
      }
      if (!this.sub.img) {
        this.$notify('请上传图片')
        return false
      }
      http
        .post(api.save_works, {
          id: this.sub.id,
          title: this.sub.name,
          img: this.sub.img
        })
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.$notify({ type: 'success', message: res.message })
            this.$router.push({ path: '/freelance/casestudy' })
          } else {
            this.$notify(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  mounted () {
    // 改变上传样式
    document
      .querySelector('.van-uploader__wrapper')
      .setAttribute('style', 'height: 100%;width:100%')
    document
      .querySelector('.van-uploader__upload')
      .setAttribute('style', 'margin: 0;height: 100%;width:100%')
    document
      .querySelector('.van-uploader__input')
      .setAttribute('style', 'z-index: 2')
  }
}
</script>
<style lang="scss" scoped>
.line{
    height: 60px;
    background-color: #ffffff;
    border-left: 18px solid #ffffff;
    border-right: 18px solid #ffffff;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    position: relative;
    .title{
        line-height: 1;
        font-size: 15px;
        color: #2a3140;
        position: relative;
    }
    input{
        width: calc(100vw - 120px);
        text-align: right;
        position: absolute;
        right: 0px;
        color: #2a3140;
        font-size: 15px;
        border:none;
        outline: none;
        padding: 0px;
        margin: 0px;
        text-align: right;
    }
    input::-webkit-input-placeholder {
        color: #c4c7cd;
    }
}
.protitle{
    margin-top: 32px;
    margin-left: 18px;
    margin-bottom: 24px;
    line-height: 1;
    font-size: 15px;
    color: #2a3140;
}
.imgcen{
    margin-left: 50px;
    margin-right: 50px;
    width: 272px;height: 180px;
    text-align: center;
    position: relative;
    img{
        width: 100%;height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
}
.van-uploader {
  width: 100%;
  height: 100%;
}
.van-uploader__wrapper {
  width: 100%;
  height: 100%;
  .van-uploader__upload {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}
.btn{
    margin-top: 77px;
    margin-left: 21px;
    width: calc(100vw - 42px);
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #464646;
    border-radius: 50px;
    background-color: #fed700;
    box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
}
</style>
